<script>
import { XInput,Group,Cell } from 'vux';
import confirmBtn from '@/components/common/confirmButton'
import { stringify } from 'querystring';
import { log, log, log, log } from 'util';
export default {
  data(){
    return{
      name:'喜东东',
      phone:'1333333333'
    }
  },
  components:{
    XInput,
    Group,
    Cell,
    confirmBtn,
  }
}
</script>

<template>
  <div class="change-Addr-wrapper">
    <div class="header-top">
      <div @click="leftBtn" class="arrow-left">
          <img src="../../images/jiantou.png" alt="">
      </div>
    </div>
    <group>
      <x-input
        title=" 收货人："
        v-model="user.contactName"
      ></x-input>
      <x-input
        title="  电话："
        v-model="user.telNumber"
        :max="13"
      ></x-input>
      <x-address
        title="地址："
        raw-value
        @on-shadow-change="onShadowChange"
        v-model="addressValue"
        :list="addressData"
        placeholder=""
      ></x-address>
      <span class="addr-detail-title">详细地址：</span><textarea
        v-model="user.detailedAddress"
        rows="5"
      ></textarea>
    </group>
    <div class="btn-wrap">删除</div>
    <div
      @click="saveAddress"
      class="btn-wrap"
    >保存</div>
  </div>
</template>

<script>
import { XInput, Group, Cell, XAddress, ChinaAddressV4Data } from "vux";
import confirmBtn from "@/components/common/confirmButton";
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";
export default {
  data() {
    return {
      addressId:'',
      index:'',
      cartNum:'',
      id: "",
      ids: "",
      type: "",
      addressValue: [],
      addressData: ChinaAddressV4Data,
      user: {
        cityName: "",
        contactName: "",
        detailedAddress: "",
        districtName: "",
        id: "",
        isDefault: "",
        provinceName: "",
        telNumber: "",
        isDefault: "n"
      },
      len: null
    };
  },
  components: {
    XInput,
    Group,
    Cell,
    confirmBtn,
    XAddress
  },
  mounted() {
    let { id, index, cartNum, ids, type,addressId, len} = this.$router.currentRoute.query;
    this.type = type;
    this.id = id;
    this.cartNum = cartNum
    this.index = index;
    this.ids = ids
    this.addressId = addressId;
    this.len = len
    if(this.addressId){
      this.getInfo();
    }
    
  },
  methods: {
    leftBtn(){
      this.$router.back(-1)
    },
    onShadowChange(ids,names) {
      this.user.provinceName = names[0];
      this.user.cityName = names[1];
      this.user.districtName = names[2]
  },
    getInfo() {
      let url = CONSTANT.LIST.ADDRESSBYID;
      common.get(url, this.addressId, res => {
        if (res.code == 200) {
          this.user = res.data.bussData;
          this.addressValue = [
            this.user.provinceName,
            this.user.cityName,
            this.user.districtName
          ];
        }
      });
    },
    saveAddress() {
      this.$vux.loading.show({
        text: "提交中"
      });
      let url = CONSTANT.LIST.ADDRESSSAVE;
      common.post(url, this.user, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          this.$vux.toast.show({
            text: "保存成功"
          });
          setTimeout(()=>{
            if (this.len == 0) {
              this.$router.go(-1)
              return;
            }
            this.$router.back()
//            this.$router.replace(`/myAddr?type=${this.type}&id=${this.id}&cartNum=${this.cartNum}&index=${this.index}&ids=${this.ids}`);
          },500)
        } else {
          console.log(res,'erroe')
          this.$vux.toast.show({
            text: res.data.errMsg,
            type: "cancel"
          });
        }
      });
    }
  }
};
</script>

<style lang="less">
body,
html {
  width: 100%;
  background: #f7f7f7;
}
.change-Addr-wrapper {
  width: 100%;
  margin-bottom: 2.5rem;
  .header-top{
    height: .8rem;
    line-height: .8rem;
    background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
    .arrow-left{
      position: absolute;
      left: .1rem;
      top: .1rem;
      height: .9rem;
      width: 1rem;
      z-index: 99;
      img{
        height: .5rem;
        width: .5rem;
      }
    }
  }
  textarea {
    width: 5.4rem;
    padding: 0.37rem 0rem 0rem 0.28rem;
    border-bottom: 0;
    .confirm-container {
      .confirm {
        opacity: 1;
      }
    }
  }
  .btn-wrap {
    width: 6.9rem;
    height: 0.88rem;
    background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
    border-radius: 0.44rem;
    line-height: 0.88rem;
    text-align: center;
    margin: 0 auto;
    font-size: 0.32rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    margin-top: 4.37rem;
    &:last-child {
      margin-top: 0.22rem;
    }
  }
  .vux-popup-picker-value.vux-cell-value {
    float: left;
    margin-left: 0.8rem;
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(126, 86, 198, 1);
  }
  .weui-cell.vux-tap-active {
    padding: 0px 15px;
    height: 1rem;
    .vux-popup-picker-placeholder {
      font-size: 0.28rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
  }
}
.weui-label,
.weui-input,
.vux-label,
.addr-detail-title,
textarea {
  font-size: 0.28rem !important;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #333333 !important;
}
.addr-area {
  font-size: 0.28rem;
  color: #7e56c6;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  position: relative;
  right: 2.36rem;
}
.container {
  position: fixed;
  bottom: 0.3rem;
}
.addr-detail-title {
  vertical-align: top;
  margin-left: 0.24rem;
  margin-top: 0.37rem;
}
.weui-cell {
  height: 0.8rem;
}
.delBtn {
  bottom: 1.4rem;
}
</style>